<template>
  <div class="search-result">
    <h2>购物车</h2>
    <table class="table table-striped jambo_table table-bordered">
      <thead>
        <tr>
          <th class="text-center" width="50">ID</th>
          <th class="text-center" width="80">数量</th>
          <th class="text-center" width="140">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="products == undefined || products.length == 0"><td colspan=3  class="text-center">无数据</td></tr>
        <tr v-for="item in products">
          <td class="text-center">{{item.id}}</td>
          <td class="text-center">{{item.quantity}}</td>
          <td class="text-center">
            <button :display="!item.inventory" type="button" class="btn btn-primary fz-12" @click="removeFromCart(item)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapGetters,mapActions} from "vuex"

export default {
  computed:mapGetters({
    products:'getCarts'
  }),
  methods:mapActions(['removeFromCart'])
}
</script>
